<template>
  <div class="box-wrapper">
    <div class="box">
      <el-input :disabled="disabled" v-model="value1" type="number" class="time-box" @blur="submit"/>时
      <el-input :disabled="disabled" v-model="value2" type="number" class="time-box time-box-last" @blur="submit"/>分
      <el-input :disabled="disabled" v-model="value3" type="number" class="time-box time-box-last" @blur="submit"/>秒
    </div>
  </div>
</template>

<script>
/**
   * 单行文本
   */
import {
  guid
} from '@/utils'
export default {
  'name': 'xhTime',
  props: {
    value: {
      type: String,
      default: '00:00'
    },
    /** 索引值 用于更新数据 */
    index: Number,
    /** 包含数据源 */
    item: Object,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      batchId: guid(),
      value1: '0',
      value2: '0',
      value3: '0'
    }
  },
  watch: {
    value: {
      handler(val) {
        val = val.replace(/:/g, ' ')
        var time = val.split(' ')
        this.value1 = time[0] || '0'
        this.value2 = time[1] || '0'
        this.value3 = time[2] || '0'
      },
      immediate: true
    }
  },
  methods: {
    submit() {
      const time = this.value1 + ':' + this.value2 + ':' + this.value3
      this.$emit('value-change', {
        index: this.index,
        batchId: this.batchId,
        value: time })
    }
  }
}
</script>

<style scoped lang="scss">
  .box {
    width: 260px;
    height: 32px;
    padding: 0 10px;
    display: flex;
    font-size: 14px;
    .time-box {
      width: 80px;
      height: 32px;
      color: #333;
      background-color: #ffffff;
      margin-right: 5px;
    }
    .time-box-last {
      margin-left: 5px;
    }
  }
</style>
